<template>
    <div>
        <el-row class="first">
            <el-col :span="8">
                <div>
                    <span><el-input v-model="startTime" placeholder="请输入日期"></el-input></span>
                    <span>至</span>
                    <span><el-input v-model="endTime" placeholder="请输入日期"></el-input></span>
                </div>
            </el-col>
            <el-col :span="3" style="padding-left: 10px">
                <el-button type="primary" @click="selectMoney()">查询成本/利润</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table
                        :header-cell-style="this.$store.state.headerCssObj"
                        :cell-style="this.$store.state.cellCssObj"
                        :data="pageData"
                        border
                        :summary-method="getSummaries"
                        show-summary
                        style="width: 100%; margin-top: 20px">
                    <el-table-column
                            prop="total"
                            label="总价">
                    </el-table-column>
                    <el-table-column
                            prop="revenue"
                            label="收入">
                    </el-table-column>
                    <el-table-column
                            prop="cost"
                            label="成本">
                    </el-table-column>
                    <el-table-column
                            prop="profit"
                            label="利润">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <div class="pages">
                <paging :obj = 'pagingData'></paging>
            </div>
        </el-row>
    </div>
</template>

<script>
    import paging from "../../components/publicCom/paging";
    import * as  url from '../../http/api'
    export default {
        name: "costManagementPage",
        inputMessage:'',
        data(){
            return{
                startTime:'',
                endTime:'',
                pageCount:1,
                currentData:[

                    ],
                currentPage:1,
                totalPage:'',
                pageNums:0,
            }
        },
        components:{
            paging
        },
        methods: {
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '总价';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += ' 元';
                    } else {
                        sums[index] = 'N/A';
                    }
                });

                return sums;
            },
            selectMoney(){
                let start = this.startTime;
                let end = this.endTime;
                let obj = {
                    endTime: end,   //截止时间
                    pageCount: this.currentPage,   //页容量
                    pageSize:5,    //页码
                    startTime: start,  //开始时间
                };
                this.$axios({
                    url:url.costManagementPage,
                    method:'post',
                    data:obj
                }).then(resp=>{
                    if(resp.data.Code === 200){
                        this.$message.success({message:'查询成功'})
                        this.currentData = resp.data.costList
                    }else {
                        this.$message.error({message:'查询成功'})
                    }

                })

            },
            fenye1(){
                let obj = {
                    pageCount:5,//页容量
                    pageSize:this.currentPage,//当前页
                };
                this.$axios({
                    url:url.costManagementPage,
                    method: 'post',
                    data:obj
                }).then(resp=>{
                    console.log(resp)
                    this.currentData = resp.data.costList
                    this.pageNums = resp.data.totalPage
                    // let timestamp = resp.data.supplierEntityList[0].createTime;

                })
            },
        },
        mounted(){
            this.fenye1()
        },
        computed:{
            pagingData(){
                var that = this;
                let data = {
                    pageSize:5,//一页展示几条数据
                    pagerCount:5,//超过多少页打点省略
                    pageCount: this.pageNums,//一共有几页
                    currentChange(num) {
                        // console.log(num)
                        that.currentPage = num;//改变当前页
                        that.fenye1();
                    },
                };
                return data
            },
            pageData(){
                return this.currentData
            }

        },
    }
</script>

<style scoped lang="less">
    .el-input{
        width: 150px;
        height: 30px;
    }
    .first{
        padding: 10px 0;
    }
    .pages{
        text-align: center;
        padding: 10px 0;
    }
</style>